<template>
	<view class="page" :style="{'padding':navigationbarHeight+'px 0 76rpx 0'}">
        <TopBar :PageNum.sync="Num" :showName='showName'></TopBar>

        <view class="contain">



<swiper 	:style="{'height':containerHeight}" @change="containerChange" :current="Num">
	<swiper-item style="-webkit-overflow-scrolling:touch;overflow: scroll;">
		<!--            关注内容-->
		 <scroll-view scroll-y="true" upper-threshold="100" :style="{'height':containerHeight}" @scroll="onFollowScroll" @scrolltoupper="pullDownRefreshFn" @scrolltolower="reachBottomFn">
			<view class="contain-follow">
				<view class="follow-content" v-if="followList.length<=0">
					<view class="follow-content-icon">
						<img mode="widthFix" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/bibiji-null.png" />
					</view>
					<text>你关注的机友近期并没有发帖~</text>
				</view>
				<view class="follow-list backgroundColor" v-if="followList.length>0">
					<invitation :Article.sync="followList" :levelShow="levelShow" :nowNum="Num" :nowSite="followSite" :show="Num==0"></invitation>
				</view>
			
			</view>
		 </scroll-view>
		<!-- end -->
	</swiper-item>
	<swiper-item style="-webkit-overflow-scrolling:touch;overflow: scroll;">
		 <scroll-view scroll-y="true" upper-threshold="100" :style="{'height':containerHeight}" @scroll="onPopularScroll"  @scrolltoupper="pullDownRefreshFn" @scrolltolower="reachBottomFn">
		<!--            首页内容-->
			<view class="contain-index">
				<!-- indexShow -->
				<!--                banner轮播图-->
				<view class="index-banner" v-if="bannerType">
					<swiper class="banner-swiper" autoplay="true" interval="2000" duration="1500"	>
						<swiper-item v-for="item in bannerList" :key="item.id" @click="toActivity(item)">
							<img :src="item.img_url" />
						</swiper-item>
					</swiper>
				</view>
				<!--                end-->
				<view class="index-content backgroundColor">
					<!--                    列表元素-->
					<invitation :Article.sync="popularList" :levelShow="levelShow" :nowNum="Num" :nowSite="popularSite" :show="Num==1"></invitation>
					<!--                    end-->
				</view>
			</view>
		<!--            end-->
		 </scroll-view>
	</swiper-item>
	
	<swiper-item style="-webkit-overflow-scrolling:touch;overflow: scroll;">
		 <scroll-view scroll-y="true" :style="{'height':containerHeight}" @scroll="onScroll" @scrolltoupper="pullDownRefreshFn" @scrolltolower="reachBottomFn">
		<!-- 福利 -->
		<!-- welfareShow -->
			<view>
				<div class="tabBarWrapper"  >
					<div class="tabBar">
						<!--<div @click="welfareShowIndex=0" :class="{'tabItem':true,'tabItemActive':welfareShowIndex==0}">抽奖</div>-->
						<div @click="welfareShowIndex=1" :class="{'tabItem':true ,'tabItemActive':welfareShowIndex==1}">积分</div>
					</div>
				</div>
				<!--<div v-if="welfareShowIndex==0">-->
					<!--<drawListPage/>-->
				<!--</div>-->
				<div :class="welfareShow?'animation-show':''">
					<shop :goodsList="goodsList" ref="shop"/>
				</div>
			</view>
		<!-- 福利end -->
		 </scroll-view>
	</swiper-item>
</swiper>
            
			
			
<!--            end-->
<!--            弹窗-->
            <!-- <Dislike :fatherValue.sync="popupShow" ></Dislike> -->
<!--            end-->
        </view>
        <navBar></navBar>
    </view>
</template>

<script>
    import navBar from '@/pages/components/navBar/index.vue'
    import Search from "@/pages/components/search-input/search.vue";
    import Dislike from "@/pages/components/popup/dislike.vue";
    import Invitation from "../components/invitationItems/invitation";
    import TopBar from "../components/topBar/topBar";
	import drawListPage from '@/pages/components/drawListPage/index.vue';
	import shop from '@/pages/components/shop/shop'
	export default {
		data(){
			return{
                navigationbarHeight: getApp().globalData.navStyle.navigationbarHeight,
			    Num:1,
                IndexShow:true,
                FollowShow:false,
				welfareShow:false,
                bannerType:true,
                popupShow:false,
                bannerList: [],
                followList:[],
                followpage: 1,
                page_follow:{},
                popularList:[],
                popularpage: 1,
                page_popular:{},
                showName: 'nav',
				welfareShowIndex:0,//0抽奖，1积分
				shopPageNum:1,//积分商城的页码
				goodsList:[],//积分商品
                levelShow:false,
				followSite:0,
				popularSite:0,
			}
		},
		computed:{
			containerHeight(){
				return uni.getSystemInfoSync().screenHeight-this.navigationbarHeight+'px'
			}
		},
        components:{
            TopBar,
            Invitation,
            Dislike,
            Search,
            navBar,
			drawListPage,
			shop
        },
		onLoad(query){
			if(query.inviteId){
				//邀请人的用户id，新用户授权时带上
				this.$bus.$data.inviteId=query.inviteId
			}
			uni.hideTabBar()
            this.getBannerList();
            this.myFollowUserActive();
            this.recommendHotArticle();
		},
		onShow(){
		    // if (this.popularList.length == 0){
		    //     this.onWXshow();
            // }
            this.welfareShowIndex=1
		},
		onReady(){

		},
        //上拉刷新
        onPullDownRefresh(){
            this.pullDownRefreshFn()

        },
        //下拉触底追加
        onReachBottom(){
		    this.reachBottomFn()
        },
		// //小程序监听页面滚动
		onPageScroll(e){
			if (this.Num == 0){
				this.followSite = e.scrollTop;
			} else if (this.Num == 1) {
				this.popularSite = e.scrollTop;
			}else if (this.Num == 2) {

			}
		},
		methods:{
			// handletouchmove(e){
			// 	console.log(e)
			// },
			onFollowScroll(e){
				this.followSite = e.detail.scrollTop;
			},
			onPopularScroll(e){
				this.popularSite = e.detail.scrollTop;
			},
			containerChange(e){
				//页面切换
				this.Num=e.detail.current
			},
			pullDownRefreshFn(){
				uni.stopPullDownRefresh()
				this.onWXshow();
				if (this.Num == 0) {
				    this.followpage = 1;
				    this.myFollowUserActive();
				}else if(this.Num == 1){
				    this.popularpage = 1;
				    this.recommendHotArticle();
				}else if(this.Num==2){//福利
					if(this.welfareShowIndex==1){
						this.$refs.shop.getUserInfo();//刷新积分信息
						this.shopPageNum=1//积分商城的页码
				        this.goodsList = []
				        this.getGoodsList()
					}
					
				}
			},
			reachBottomFn(){
				uni.showLoading({
					mask:true,
					message:'加载中'
				})
				if (this.Num == 0){
				    this.followpage++;
				    this.myFollowUserActive();
				} else if(this.Num == 1) {
				    this.popularpage++;
				    this.recommendHotArticle();
				}else if(this.Num==2){//福利
					if(this.welfareShowIndex==1){
						this.shopPageNum++//积分商城的页码
						this.getGoodsList()
					}
					
				}
			},
			toActivity(val){
				//banner跳转
				const url=val.link_url
				url=encodeURIComponent(url)
				let pattern=/^\/pages/
				if(pattern.exec(url)){
				  this.$currency.navigateTo(url)
				}else{
				  uni.navigateTo({url:'/pages/index/webview/webview?url='+url})
				}
			},
		    //滑动事件-开始
            startTouch(e){
                this.touchstart = e.changedTouches[0].clientX;
                // console.log(e)
            },
            //滑动事件-结束
            endTouch(e){
                // console.log(e)
                // let touchlength = e.changedTouches[0].clientX - this.touchstart;
                // if (touchlength>=100){
                //     if (this.Num==0){
                //         this.Num = 2;
                //     } else {
                //         this.Num--;
                //     }
                // }else if (touchlength<=-100){
                //     if (this.Num==2){
                //         this.Num = 0;
                //     } else {
                //         this.Num++;
                //     }
                // }
            },
		    //页面数据的重更新
            onWXshow(){
                this.getBannerList();
                // this.myFollowUserActive();
                // this.recommendHotArticle();
            },
		    //获取首页banner列表
            async getBannerList(){
              let params = {
                  type : 'index'
              }
              const res = await this.$api.getBannerList(params);
              if (res.data.level == 'success'){
                  this.bannerList = res.data.data;
                  if (this.bannerList.length==0){
                      this.bannerType = false;
                  }
              }else {
                  uni.showToast({
                      icon:'none',
                      title:res.data.message
                  })
              }
            },
            //获取关注用户的动态
            async myFollowUserActive(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    page: this.followpage,
                    limit: 10
                }
                const res = await this.$api.myFollowUserActive(params);
                if (res.data.level == 'success'){
                    if (this.followpage == 1){
                        this.followList = res.data.data;
                    }else {
                    	if (res.data.data.length>0){
							this.followList = this.followList.concat(res.data.data);
						} else {
                    		this.followpage--;
							uni.showToast({
								icon:'none',
								title:'无更多用户动态',
								duration: 3000
							})
						}
                    }
                    this.page_follow = res.data.page_info
                }else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
				uni.hideLoading()
            },
            //首页热门帖子
            async recommendHotArticle(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    page: this.popularpage,
                    limit: 10
                }
                const res = await this.$api.recommendHotArticle(params);
                if (res.data.level == 'success'){
                    if (this.popularpage == 1){
                        this.popularList = res.data.data
                    }else {
						if (res.data.data.length>0){
							this.popularList = this.popularList.concat(res.data.data);
						} else {
							this.popularpage--;
							uni.showToast({
								icon:'none',
								title:'无更多热门动态',
								duration: 3000
							})
						}
                    }
                    this.page_popular = res.data.page_info
                }else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
				uni.hideLoading()
            },
			//获取积分商品
			async getGoodsList(){
				
				let params={
					page:this.shopPageNum,
					limit:20
				}
				let res=await this.$api.getGoodsList(params);
				if(res.data.level=='success'){
					this.goodsList=[...this.goodsList,...res.data.data]
				}
				uni.hideLoading()
			},
		},
        watch:{
            Num(newValue, oldValue) {
                if (newValue==0){
                	if (this.followList.length==0){
						this.myFollowUserActive();
					}
    //                 this.IndexShow = false;
				// 	this.welfareShow=false;
    //                 this.FollowShow = true;
                } else if(newValue==1) {
					if (this.popularList.length==0){
						this.recommendHotArticle();
					}
    //                 this.IndexShow = true;
    //                 this.FollowShow = false;
				// 	this.welfareShow=false;
    //                 // this.myFollowUserActive();
                }else if(newValue==2){
					this.$refs.shop.getUserInfo();//刷新积分信息
					if (this.goodsList.length==0){
						this.getGoodsList();
					}

				// 	this.IndexShow = false;
				// 	this.FollowShow = false;
				// 	this.welfareShow=true;
				}
				// this.Num=newValue
            },
			welfareShowIndex(nval){
				if(nval==1){
					this.shopPageNum=1;
					this.goodsList=[]
					this.getGoodsList()
				}
			}
        }
	}
</script>
<style lang="scss" scoped>
    @import "../../static/scss/indexstyle.scss";
	@import '~@/static/scss/mixin.scss';
	.tabBarWrapper{
		width:100%;
		margin:40rpx 0;
		// transform: scale(1);
		// transition: all .3s ease-in-out;
		.tabBar{
			width:calc(100% - 60rpx);
			margin-left:30rpx;
			@include flex();
			.tabItem{
				flex:1;
				border-radius: 20rpx;
				background-color:#F1F4F7 ;
				text-align: center;
				line-height: 80rpx;
				color:#8B8D93
			}
			.tabItemActive{
				background-color:#fff ;
				color:#000;
				font-weight: 600;
			}
		}
	}
	.animation-show{
		// transform: scale(10);
	}
	
	
</style>